<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入echart库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.js"></script>
    <!-- 从官网主题编辑器引入主题 -->
    <script src="backgroud.js"></script>
    <style>
        #chart {        
            /* 给chart dom指定长宽 */
            width: 800px;
            height: 400px;
        }
    </style>
    
</head> 
<body>
    <div id="chart"></div>

    <script>
        
        
        const chartDom = document.getElementById('chart');  //获取dom
        //初始化 第二个参数为主题 官方默认提供light和dark模式 第三个参数渲染样式为svg 默认为canvas
        //canvas适合频繁更新 svg适合大屏显示
        const chart = echarts.init(chartDom,'wonderland',{renderer:"svg"});   
        chart.setOption({              //给dom指定标题
            title:{   
                text:'Echarts入门'      
            },
            xAxis:{
                data:['食品','数码','服饰','箱包']
            },            //x轴参数
            yAxis:{},            //y轴参数
            series:{             //数据和图片类型
                type: 'bar',     //柱状图
                data: [100,200,50,300]
            }            
        });
    </script>
</body>
</html>